import { useState, useEffect } from 'react';
import { getTop } from "../api/user"
import ScoreItem from './ScoreItem';
import { Card } from "antd"
import { IUserInfo } from "../typings"

// 积分排名
function ScoreRank() {
    const [topUserInfo, setTopUserInfo] = useState<IUserInfo[]>([])
    useEffect(() => {
        const fetchData = async () => {
            const res = await getTop();
            setTopUserInfo(res.data.data)
        }
        fetchData();
    }, [])
    const userPointsRankArr = [];
    if (topUserInfo.length) {
        for (let i = 0; i < topUserInfo.length; i++) {
            userPointsRankArr.push(<ScoreItem key={topUserInfo[i]._id} rankInfo={topUserInfo[i]} rank={i + 1} />)
        }
    }
    return (
        <Card title="积分排行榜">
            {userPointsRankArr}
        </Card>
    );
}

export default ScoreRank;